.container {
  font-size: 1.2rem;
  display: flex;
  border-bottom: 1px var(--fo-palette-primary-plainColor) solid;
  overflow: visible;
}

.input {
  overflow: hidden;
  width: 100%;
}

.input input {
  background-color: transparent;
  text-decoration: none !important;
  outline: none;
  border: none;
  color: var(--fo-palette-text-primary);
  font-size: 1.2rem;
  border: none;
  align-items: center;
  font-weight: bold;
  text-overflow: ellipsis;
  width: 100%;
}

.input input:focus {
  border: none;
  outline: none;
  font-weight: bold;
}

.input input::placeholder {
  color: var(--fo-palette-text-secondary);
  font-weight: bold;
}

.resultsContainer {
  background-color: var(--fo-palette-background-level2);
  border: 1px solid var(--fo-palette-primary-plainBorder);
  border-radius: 2px;
  box-shadow: 0 2px 20px var(--fo-palette-custom-shadow);
  box-sizing: border-box;
  width: auto;
  /*
    Overriding with important because react-laag overrides the min-width otherwise.
  */
  min-width: 100px !important;
  overflow: visible;
  position: absolute;
  overflow: auto;
  max-width: 480px;
  z-index: 1000000;
}

.loadingFooter {
  text-align: right;
  color: var(--fo-palette-text-primary);
  padding: 0 0.25rem;
  font-size: 1rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  text-decoration: none;
  border-top: 1px solid var(--fo-palette-primary-plainBorder);
}

.loadingFooter:after {
  text-align: right;
  color: var(--fo-palette-text-primary);
  padding: 0 0.25rem;
  font-size: 1rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  text-decoration: none;
  border-top: 1px solid var(--fo-palette-primary-plainBorder);
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4, end) 900ms infinite;
  animation: ellipsis steps(4, end) 900ms infinite;
  content: "\2026";
  /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 1.25em;
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 1.25em;
  }
}
